﻿import QtQuick 2.7
import QtQuick.Controls 1.5
import QtGraphicalEffects 1.0

Item {
    id: poke
    property int type   //
    property bool bClicked : false   //
    property bool bEnabled : true   //
    property bool bCanBeSelected : true   //
    signal click(bool bClicked);

    Rectangle {
        id: rect
        width: image.width
        height: image.height
        //color: "red"

        //property alias buttonText: textItem.text	//


        Image {
            id: image
            source: "Pai101.jpg"
            //anchors.fill: parent
        }

        DropShadow {
            anchors.fill: image; source: image
            horizontalOffset: 4; verticalOffset: 4
            radius: 12.0; samples: 16; color: "#80000000";
        }

        ColorOverlay {
            id: colorOverlay
            property bool shunxu: true
            anchors.fill: image;
            source: image;
            color:createColorOverlay();
            Behavior on color {
                ColorAnimation {
                    duration: 500
                    onRunningChanged:
                    {
                        if(!running)
                        {
                            colorOverlay.shunxu = !colorOverlay.shunxu;
                        }

                    }
                }
            }
        }

        MouseArea {
            anchors.fill:parent
            onClicked: {
                //console.log(mouse.x);
                //console.log(width);
                if(bEnabled)
                {
                    bClicked = !bClicked
                    poke.click(bClicked);
                    colorOverlay.shunxu = true;
                }
            }
        }

/*
        Glow {
            anchors.fill: image; source: image
            radius: 16; samples: 24
            color: "red"; spread: 0.01
            fast: true;
        }
        */


    }


    Behavior on x {
        NumberAnimation {
            duration: 500
        }
    }
    Behavior on y {
        NumberAnimation {
            duration: 500
        }
    }


    Component.onCompleted: {
        //width = image.width
        //height = image.height
        console.log(image.width);
        console.log(width);
    }

    function createColorOverlay()
    {
        if(!bEnabled)
            return "#80000000"
        else if(bClicked)
        {
            if(colorOverlay.shunxu)
                return "#80F0F000"
            else return "#00FFFFFF"
            //bClicked?"#80F0F000":"#00FFFFFF"
        }
        else if(bCanBeSelected)
            return "#8000FF00"
        else
        {
            //colorOverlay.shunxu = true;
            return "#00FFFFFF"
        }
    }
    onClick: {
        console.log(bClicked);
        x = x+100;
        y = y+200;
        if(x >= 500)x=0;
        if(y >= 500)y=0;

        //image.source = "1.jpg"
    }
}

